import React, { Component } from 'react';
import {View, Text} from '@tarojs/components'
import PropTypes from 'prop-types'
import './redbag.scss'

interface StateType {
  name: string
  total: number
  startDate: string
  endDate: string
  status: 0 | 2 | 1
  mode: 'redbag' | 'integral'
  time: string
  memo: string
}

// status 0 未使用  1已使用  2 已过期
export default class Redbag extends Component<StateType> {
  static defaultProps = {
    name: '',
    total: 0,
    startDate: '',
    endDate: '',
    status: 0,
    mode: 'redbag',
    time: '',
    memo: '',
  }
  static propTypes = {
    name: PropTypes.string.isRequired,
    total: PropTypes.number,
    startDate: PropTypes.string,
    endDate: PropTypes.string,
    status: PropTypes.number,
    mode: PropTypes.string.isRequired,
    time: PropTypes.string,
    memo: PropTypes.string,
  }

  numJoin(index) {
    const total = this.props.total.toString()
    if (index == 1) {
      return total.split('.')[1]
    } else {
      return total.split('.')[0]
    }
  }

  render() {
    const {status, total, name, memo, startDate, endDate} = this.props
    return (
      <View className={status == 2 ? "redRoot end" : "redRoot"}>
        <View className='price'>¥
          <Text className='text'>
            { total }
          </Text>
        </View>
        <View className={status ? (status == 1 ? 'right shiyong' : 'right guoqi') : 'right'}>
          <View className='head'>
            <View className='name'>{name}</View>
          </View>
          {memo && <View className='foot'>{memo}</View>}
          {!memo && <View className='foot'>有效期:{startDate} 至 {endDate}</View>}
        </View>
      </View>
    )
  }
}
